<html>
	<body>
		<div class="panel-body">
				<div class="input-group" style="width:96%;margin:5px;max-width:400px;">
					<span class="input-group-addon right-radius-none">
					<i class="fa fa-search"></i></span>
					<input id="role_menu_config_search" autocomplete="off" type="text" placeholder="搜索" class="form-control radius-none">
				</div>
				<ul class="ztree" id="menuTree" style="max-height:200px;overflow:auto;"></ul>
			</form>
		</div>
		<script type="text/javascript">
		$(function(){
			var zTree = null;
			var setting = {
				check: {
	                enable: true,
	                chkStyle: "checkbox"
	            },
				data: {
					simpleData: {
						enable: true,
						idKey: "id",
						pIdKey: "parentId"
					},
					key: {
						name: "menuName",
						url:''
					}
				},callback: {
					onClick: function (e, treeId, treeNode, clickFlag) { 
				 		zTree.checkNode(treeNode, !treeNode.checked, true); 
				 	} 
				}
			};
			var selectNodes;
			var zAjax = $.get('/resource/list?order=menuNo&sort=asc',function(zNodes){
				zTree = $.fn.zTree.init($("#menuTree"), setting, zNodes);
                fuzzySearch('menuTree','#role_menu_config_search',null,true);
			});
			var sAjax = $.get('/resource/list/roleId',{roleId:'${id}'},function(data){
				selectNodes = data;
			});
			$.when(zAjax,sAjax).done(function(){
				$.each(selectNodes,function(index,node){
					var zNode = zTree.getNodeByParam("id",node.id);
					zTree.checkNode(zNode,true,true);
					zTree.expandNode(zNode, true, false);
				});
			});
		});
		</script>
	</body>
</html>